<template>
	<uni-popup ref="popup" type="bottom">
		<view class="weekly">
			<view class="block" v-for="(item,index) in date" :key="index">
				<view class="box_1 flex-row">
					<view class="text-group_5 flex-col" v-for="(item2,index2) in item.WeekData "
						:class="tabID == item2.endTime?'active':''" :key="item2.endTime" @click="testTabClick(item2)">

						<text class="text_14">第{{index2+1}}周</text>
						<text class="text_15 ">{{item2.beginTime}}至{{item2.endTime}}</text>
					</view>
				</view>
				<view class="mon flex-between">
					<view class="txte" @click="sub">
						-
					</view>
					<view>
						<text class="txte">
							{{item.month}}
						</text>
					</view>
					<view class="txte" @click="add">
						+
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>


<script>
	export default {
		data() {
			return {
				tabID: '',
				date: {
					month: '',
					WeekData: [{
						beginTime: '',
						weeknum: '',
						endTime: '',
						startDate: "",
						endDate: ""
					}, ]
				},
				year: '',
				month: '',
				num:0,
				firstFlag:true
			}
		},
		created() {
			const date = new Date()
			let week = date.getDay()
			const day = date.getDate()
			week = (week==0)?7:week
			this.num = Math.ceil((day+6-week)/7)-1
			this.year = date.getFullYear();
			//获取月
			this.month = date.getMonth() + 1;
			this.initData(this.year + '-' + this.month + '-01')
		},

		methods: {
			show() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			add() {
				this.month++
				if (this.month > 12) {
					this.month = 1
					this.year++
				}
				this.initData(this.year + '-' + this.month + '-01')
			},
			sub() {
				this.month--
				if (this.month < 1) {
					this.month = 12
					this.year--
				}
				this.initData(this.year + '-' + this.month + '-01')
			},
			initData(e) {
				let arr = []
				let getLastSixMon = this.getLastSixMon(new Date(e))
				let res = getLastSixMon;
				let id = res.slice(5, 10)
				let WeekData = this.weeks(res)
				let month = res.replace('-', '年') + '月'
				let result = {
					month,
					WeekData,
				}
				arr.push(result)
				arr.forEach((item, index) => {
					let last = arr[index + 1],
						first = arr[index],
						lastData,
						firstData = first.WeekData[0].endTime
					if (last) {
						let lastlen = last.WeekData.length - 1
						lastData = last.WeekData[lastlen].endTime
					}
					if (lastData == firstData) {
						last.WeekData.pop()
					}

				})
				this.date = arr
				if(this.firstFlag){
					this.firstFlag = false
					this.$emit('initFo',arr[0].WeekData[this.num])
					this.tabID = arr[0].WeekData[this.num].endTime
				}
			},
			getLastSixMon(e) {
				// var data = new Date('2022-07-01');
				var data = e
				//获取年
				var year = data.getFullYear();
				//获取月
				var mon = data.getMonth() + 1;
				var arry = ''
				if (mon <= 0) {
					year = year - 1;
					mon = mon + 12;
				}
				arry = year + "-" + mon;
				mon = mon - 1;
				return arry
			},
			time(date) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				return y + '-' + m + '-' + d
			},
			weeks(now_month) {
				let {
					time
				} = this
				let week_array = [];
				let today = new Date(Date.parse(now_month));
				let year = today.getFullYear();
				let month = today.getMonth();
				let i = 0;
				let start = new Date(year, month, 1); // 得到当月第一天
				let end = new Date(year, month + 1, 0); // 得到当月最后一天
				// 循环每周最后天叠设置为第一天，直到最后一天小于当月的最后一天
				while (start <= end) {
					const monday = new Date(start.getTime());
					const sunday = new Date(start.getTime());
					let startDate, endDate
					monday.setDate(monday.getDate() + 1 - monday.getDay());
					sunday.setDate(sunday.getDate() + 7 - sunday.getDay());
					startDate = time(monday),
						endDate = time(sunday)
					week_array.push({
						startDate,
						endDate,
						beginTime: startDate.slice(5, 10).replace('-', '.'),
						endTime: endDate.slice(5, 10).replace('-', '.'),
					})

					start = sunday;
				}
				return week_array;
			},
			testTabClick(item) {
				this.tabID = item.endTime
				this.$emit('change',item)
			}

		}
	}
</script>


<style lang="scss" scoped>
	.text-wrapper_1 {
		background-color: rgba(245, 252, 248, 1);
		padding: 16rpx 334rpx 16rpx 32rpx;
		margin-bottom: 32rpx;

		.text_3 {
			overflow-wrap: break-word;
			color: rgba(0, 182, 82, 1);
			font-size: 26rpx;
			letter-spacing: 0.10833333432674408px;
			text-align: left;
			white-space: nowrap;
			line-height: 36rpx;
		}
	}

	.active {
		color: #ffffff !important;
		background: -webkit-linear-gradient(top, #1384ff 0%, #1384ff 100%)
	}

	.weekly {
		padding: 30rpx 15rpx;
		background-color: #fff;
		text-align: center;
		margin: auto;
	}

	.mon {
		width: 300rpx;
		height: 55rpx;
		margin: 0 auto;
	}

	.flex-row {
		display: flex;
	}

	.flex-col {
		display: flex;
		flex-direction: column
	}

	.txte {
		font-size: 30rpx;
		font-weight: 800;
		text-align: center;
	}
	.box_1 {
		display: flex;
		flex-wrap: wrap;
		justify-items: center;
		border-radius: 6px;
		padding: 18rpx 8rpx 18rpx 8rpx;
		color: #9b9b9b;

		.text-group_5 {
			padding: 30rpx;
			background-color: rgba(244, 246, 247, 1);
			margin-left: 26rpx;
			margin-bottom: 25rpx;
			border-radius: 20rpx;
			
			.text_14 {
				overflow-wrap: break-word;
				color: rgba(34, 34, 34, 1);
				font-size: 30rpx;
				font-family: PingFangSC-Semibold;
				text-align: center;
				white-space: nowrap;
				line-height: 42rpx;
				margin: 0 28rpx 0 30rpx;
			}

			.text_15 {
				overflow-wrap: break-word;
				font-size: 24rpx;
				text-align: center;
				white-space: nowrap;
				line-height: 34rpx;
				margin-top: -2rpx;
			}
		}
	}
</style>